<template>
  <div class="categories-page">
    <TopNav title="分类" />
    
    <main class="main-content">
      <div class="categories-grid">
        <div
          v-for="category in categories"
          :key="category.id"
          class="category-card"
          @click="handleCategoryClick(category)"
        >
          <div class="category-image">
            <img :src="category.image" :alt="category.name" />
          </div>
          <div class="category-content">
            <h3 class="category-name">{{ category.name }}</h3>
            <p class="category-count">{{ category.count }}个食谱</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import TopNav from '@/components/TopNav.vue'

interface Category {
  id: string
  name: string
  image: string
  count: number
}

const router = useRouter()

const categories = ref<Category[]>([])

const mockCategories: Category[] = [
  {
    id: '1',
    name: '川菜',
    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=400',
    count: 25
  },
  {
    id: '2',
    name: '粤菜',
    image: 'https://images.unsplash.com/photo-1563379091339-03246963d4d0?w=400',
    count: 18
  },
  {
    id: '3',
    name: '鲁菜',
    image: 'https://images.unsplash.com/photo-1565299507177-b0ac667a2852?w=400',
    count: 15
  },
  {
    id: '4',
    name: '苏菜',
    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=400',
    count: 12
  },
  {
    id: '5',
    name: '浙菜',
    image: 'https://images.unsplash.com/photo-1563379091339-03246963d4d0?w=400',
    count: 20
  },
  {
    id: '6',
    name: '闽菜',
    image: 'https://images.unsplash.com/photo-1565299507177-b0ac667a2852?w=400',
    count: 14
  },
  {
    id: '7',
    name: '湘菜',
    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=400',
    count: 16
  },
  {
    id: '8',
    name: '徽菜',
    image: 'https://images.unsplash.com/photo-1563379091339-03246963d4d0?w=400',
    count: 10
  }
]

const handleCategoryClick = (category: Category) => {
  // 这里可以跳转到分类详情页面
  console.log('点击分类:', category.name)
}

onMounted(() => {
  categories.value = mockCategories
})
</script>

<style lang="scss" scoped>
.categories-page {
  min-height: 100vh;
  background-color: var(--color-background);
}

.main-content {
  padding: var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.category-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  cursor: pointer;
  
  &:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
  }
}

.category-image {
  width: 100%;
  height: 150px;
  overflow: hidden;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
}

.category-card:hover .category-image img {
  transform: scale(1.05);
}

.category-content {
  padding: var(--spacing-md);
  text-align: center;
}

.category-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.category-count {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
  }
}
</style>
